import React from 'react';
import Container from 'components/Container';
import Common from 'components/Common';
import Baselist from 'components/Baselist';
import {Row,Col, Form, Input, Button, Select} from 'antd';
const Option = Select.Option;
import Crumb from 'components/Crumb';

const FormItem = Form.Item;

import API,{GET_ALL_ROLE,SAVE_ADMIN,EDIT_ADMIN,GET_CSRF_TOKEN} from 'lib/api';

import './style.less';
import {redirect} from "../../../lib/utils";




class Add extends React.Component {

    constructor(props){
        super(props);


    }

    state = {

        crumb:[
            {
                'href': '/',
                'title': '首页',
            },
            {
                'href': '/admin',
                'title':'管理员列表',
            },
            {
                'title':'添加/编辑管理员',
            }
        ],
        role:[],

        info:{}
    };



    componentDidMount() {

        const {id} = this.props.params;


        if(id){
            API.fetch(EDIT_ADMIN,{id:id},resp=>{
                this.props.form.setFieldsValue({
                    name: resp.name,
                    pass: resp.pass,
                    title:resp.title,
                    roleid:resp.roleid
                });
                this.setState({
                    info:resp
                })
            })
        }

        API.fetch(GET_ALL_ROLE,{},resp=>{
            this.setState({
                role:resp
            })
        })

        API.fetch(GET_CSRF_TOKEN,{},resp =>{
            this.setState({
                _token:resp
            })
        })

    }


    handleSubmit(e){
        e.preventDefault();

        const {info,_token} = this.state;
        this.props.form.validateFields((err, fieldsValue) => {
            console.log(fieldsValue);
            if (err) {
                return;
            }

            if(info.id){
                fieldsValue.id = info.id;
            }

            fieldsValue._token = _token;

            API.post(SAVE_ADMIN,fieldsValue,resp =>{
                redirect('/admin');
            })

        });
    }


    render() {

        const { getFieldDecorator } = this.props.form;

        const {role} = this.state;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 4 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };

        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 14,
                    offset: 4,
                },
            },
        };

        const {info} = this.state;


        return (

            <Container>
                {/* 基本列表  */}
                <Baselist>
                    <Crumb crumb={this.state.crumb} />
                    {/* table */}
                    <Row gutter={24} style={{borderRadius:'8px',margin:0,background: '#fff', minHeight: 500 }}>
                        <Row className="head">
                            管理员添加
                        </Row>

                        <Form onSubmit={this.handleSubmit.bind(this)}>
                            <FormItem
                                {...formItemLayout}
                                label="账号"
                                hasFeedback
                            >
                                {getFieldDecorator('name', {
                                    rules: [{
                                        required: true, message: '请输入您的账号',
                                    }],
                                })(
                                    <Input disabled={info.id?true:false} />
                                )}
                            </FormItem>


                            <FormItem
                                {...formItemLayout}
                                label="密码"
                                hasFeedback
                            >
                                {getFieldDecorator('pass', {
                                    rules: [{
                                        min: 6, message: '最小长度不可小于6字符',
                                    }, {
                                        max: 16,message: '最大长度不可超过16字符'
                                    },{
                                        required: true, message: '请输入您的密码',
                                    }],
                                })(
                                    <Input />
                                )}
                            </FormItem>

                            <FormItem
                                {...formItemLayout}
                                label="名称"
                                hasFeedback
                            >
                                {getFieldDecorator('title', {
                                    initialValue:'',
                                    rules: [{
                                        max: 10,message:'最大长度不可超过10字符',
                                    }],
                                })(
                                    <Input />
                                )}
                            </FormItem>


                            <FormItem
                                {...formItemLayout}
                                label="角色"
                                hasFeedback
                            >
                                {getFieldDecorator('roleid', {
                                    rules: [{
                                        required:true,message:'角色为必选项',
                                    }],
                                })(
                                    <Select>
                                        {
                                            role.map((v,k) => {
                                                return  <Option key={k} value={v.id}>{v.name}</Option>
                                            })
                                        }
                                    </Select
>
                                )}
                            </FormItem>


                            <FormItem {...tailFormItemLayout}>
                                <Button type="primary" htmlType="submit">保存</Button>
                            </FormItem>
                        </Form>
                    </Row>

                </Baselist>

            </Container>
        )
    }

}

export default Form.create()(Add);



